<template>
  <div class="image-cell">
    <!-- 多图模式 -->
    <template v-if="imageList.length > 1">
      <el-image
        v-for="(item, index) in imageList"
        :key="index"
        :src="item"
        :preview-src-list="imageList"
        :fit="'cover'"
        :style="imgStyle"
        class="image-cell__img"
      >
        <div slot="error" class="image-cell__placeholder">加载失败</div>
      </el-image>
    </template>

    <!-- 单图模式 -->
    <el-image
      v-else-if="imageList.length === 1"
      :src="imageList[0]"
      :preview-src-list="imageList"
      :fit="'cover'"
      :style="imgStyle"
    >
      <div slot="error" class="image-cell__placeholder">加载失败</div>
    </el-image>

    <!-- 无图 -->
    <span v-else class="image-cell__placeholder">暂无图片</span>
  </div>
</template>

<script>
export default {
  name: "ImageCell",
  props: {
    src: {
      type: String,
      default: "" // 多个图片用逗号分隔
    },
    width: {
      type: [String, Number],
      default: 60
    },
    height: {
      type: [String, Number],
      default: 60
    },
    shape: {
      type: String,
      default: "square", // square 或 circle
      validator: val => ["square", "circle"].includes(val)
    }
  },
  computed: {
    imageList() {
      if (!this.src) return [];
      return this.src
        .split(",")
        .map(item => item.trim())
        .filter(Boolean);
    },
    imgStyle() {
      let style = {
        width: typeof this.width === "number" ? this.width + "px" : this.width,
        height: typeof this.height === "number" ? this.height + "px" : this.height,
        marginRight: "6px"
      };
      style.borderRadius = this.shape === "circle" ? "50%" : "6px";
      return style;
    }
  }
};
</script>

<style scoped>
.image-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.image-cell__img {
  cursor: pointer;
}
.image-cell__placeholder {
  font-size: 12px;
  color: #aaa;
}
</style>
